.example {
  z-index: -1;
  .title {
    font-size: 28px;
    display: inline-block;
    margin: 0 auto;
    color: #20a0ff;
    padding: 15px;
  }
  .title-enter-active, .title-leave {
    transition: all 1s ease-out;
    transform: rotateY(0deg);
  }
  .title-leave-active {
    transition: all 1s ease-in;
    transform: rotateY(720deg);
  }
  .title-enter {
    transform: rotateY(-720deg);
  }
  .example-complete-item {
    display: inline-block;
    margin: 5px;
    cursor: pointer;
    .bottom {
      padding: 15px;
      .time {
        font-size: 13px;
        color: #999;
      }
    }
    .image {
      width: 100%;
      display: block;
    }
  }
  .example-complete-enter-active {
    transition: all 2s ease;
    opacity: 1;
  }
  .example-complete-enter {
    opacity: 0;
    transform: translateY(50%);
  }
}
